<template>
  <div class="main_wrap">
    <a-list :grid="{ gutter: 16, column: 4 }" :data-source="questionData">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-card :title="item.title">
          <div class="Task_Content" v-if="index != questionData.length - 1">
            <div>发布时间：{{ item.createTime }}</div>
            <div>结束时间：{{ item.endTime }}</div>
            <div>
              完成状态：
              <a-tag v-if="item.status" color="green">已发布</a-tag>
              <a-popconfirm
                v-else
                title="是否要发布测试？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirm(item.id)"
              >
                <a-tag color="red" style=""> 待发布 </a-tag>
              </a-popconfirm>
            </div>
            <div class="btn_group">
              <a-button
                style="background-color: #e6a23c; color: white"
                size="small"
                @click="editTest(item)"
                >编辑</a-button
              >
              <a-popconfirm
                title="确定要删除这条题目？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="removeTest(item.id)"
              >
                <a-button
                  type="danger"
                  size="small"                 
                  >删除</a-button
                >
              </a-popconfirm>
            </div>
          </div>
          <div class="Task_Content add_test" v-else @click="addTest">
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607083176890&di=2f1ed22fbb9b97269cc36664765764f7&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D988053700%2C539287391%26fm%3D193"
              alt=""
            />
          </div>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    add: {
      type: Function,
      default: null,
    },
    getGroupData: {
      type: Function,
      default: null,
    },
  },
  methods: {
    ...mapMutations("IntemshipGroup", [
      "setTestData",
      "setTopicData",
      "resetTestData",
    ]),
    //新增测试
    addTest() {
      var tempState = this.add("新增测试", "createTest");
      if (tempState) this.resetTestData();
    },
    //编辑测试
    editTest(item) {
      var tempState = this.add("编辑测试", "createTest");
      if (tempState) {
        this.$api
          .GetTopicsByExerciseID({ id: item.id })
          .then((res) => {
            var temp = res.data.result.map((item) => {
              return {
                key: item.id,
                title: item.name,
              };
            });
            item.oldTitle = item.title;
            this.setTestData(item);
            this.setTopicData(temp);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //删除测试
    removeTest(id) {
      this.$api
        .DeleteExerciseByID({ id })
        .then((res) => {
          if (res.data.result) {
            this.$message.success("删除成功");
            this.getGroupData();
            //signalr通知
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //确定发布测试
    confirm(id) {
      this.$api
        .PublishExercise({ id })
        .then((res) => {
          if (res.data.result) {
            this.$message.success("发布成功");
            this.getGroupData();
            //signalr通知
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    ...mapState("IntemshipGroup", ["questionData"]),
  },
};
</script>

<style lang="less" scoped>
.btn_group {
  .ant-btn {
    margin: 0 1%;
  }
}
.add_test {
  text-align: center;
  img {
    width: 30%;
  }
  &:hover {
    cursor: pointer;
  }
}
.ant-tag {
  &:hover {
    cursor: pointer;
    transform: scale(1.1);
  }
}
</style>